<template>
	<view class="comment-content">
		<ul class="head">
			<li @click='handleIndex(index)' :class="currentIndex==index? 'active2':'active1'" v-for='(item,index) in headList' :key='index'>{{ item }}</li>
		</ul>
		<ul class='order'>
			<li v-for='(item,index) in allData' :key='index'>
				<p>
					<image class='logo' src="@/static/icon/shop.png"></image>
					<span>大地智慧专营店</span>
					<span>{{ item.payStatus ? '支付成功':'等待付款'}}</span>
				</p>
				<order-card :item='item'></order-card>
				<p>
					<span>···</span>
					<span @click='addCart(item)'>加入购物车</span>
					<span>追加评价</span>
					<span>查看物流</span>
				</p>
			</li>
		</ul>
		<empty-cart v-if='allData.length==0? true:false'></empty-cart>
		<love-heart>
			<span slot='title'>为您推荐</span>
		</love-heart>
		<card-view></card-view>
	</view>
</template>

<script>
	import emptyCart from '../../../tab3/view/empty_cart.vue'
	import loveHeart from '../../../tab3/view/love_heart.vue'
	import cardView from '../../../tab1/view/card.vue'
	import orderCard from './card.vue'
	export default{
		components:{
			emptyCart,
			loveHeart,
			cardView,
			orderCard
		},
		data(){
			return{
				headList: [
					'全部','待付款','待发货','待收货','待评价','退款/售后'
				],
				currentIndex: 0,
				allData: []
			}
		},
		onLoad(option) {
			this.currentIndex = option.id
			this.updateData()
		},
		methods:{
			// 导航改变
			handleIndex(index){
				this.currentIndex = index
				this.updateData()
			},
			// 导航改变更新数据方法
			updateData(){
				if(this.currentIndex == 0){
					this.allData = this.$store.getters.getPayAllData
				}else if(this.currentIndex == 1){
					this.allData = this.$store.getters.getPayWaitData
				}else if(this.currentIndex == 2){
					this.allData = this.$store.getters.getPaySuccessData
				}else{
					this.allData = []
				}
			},
			// 加入购物车
			addCart(item){
				this.$store.commit('addCartItem', item)
			}
		}
	}
</script>

<style lang='scss'>
.active1{
	font-size: 30rpx;
	border-bottom: 5rpx solid rgba(176,196,222,.1);
}
.active2{
	color: #FF6600;
	font-size: 35rpx;
	border-bottom: 5rpx solid #FF6600;
}
.comment-content{
	width: 100%;
	height: 100vh;
	overflow: auto;
	background-color: rgba(176,196,222,.1);
	.head{
		width: 95%;
		height: 100rpx;
		margin-left: 2.5%;
		display: flex;
		justify-content: space-between;
		li{
			display: flex;
			align-items: center;
			height: 100%;
		}
	}
	.order{
		width: 97%;
    margin-left: 1.5%;
		li{
			width: 100%;
			height: 400rpx;
			margin-top: 20rpx;
			background-color: white;
			border-radius: 20rpx;
			box-sizing: border-box;
			padding: 20rpx;
			>p:first-child{
				width: 100%;
				height: 60rpx;
				display: flex;
				align-items: center;
				position: relative;
				.logo{
					width: 60rpx;
					height: 60rpx;
				}
				span:first-of-type{
					font-weight: 600;
				}
				span:last-child{
					position: absolute;
					right: 0;
					color: rgba(216,30,6,1);
				}
			}
			>p:last-child{
				width: 100%;
				height: 70rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				span{
					height: 55rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				span:first-child{
					width: 80rpx;
					letter-spacing: 5rpx;
					color: #C8C7CC;
				}
				span:nth-child(n+2){
					width: 170rpx;
					border: 2rpx solid #C8C7CC;
					border-radius: 40rpx;
					font-size: 28rpx;
				}
			}
		}
	}
}
</style>
